<template>
  <div class="tab-bar">
    <van-tabbar route v-model="currentActive" active-color="#ff9854">
      <template v-for="(item, idx) in tabbar" :key="item.path">
        <van-tabbar-item class="tab-bar-item" :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img v-if="currentActive !== idx" :src="getDynamicSrc(item.imgSrc, baseUrl)" alt="">
            <img v-else :src="getDynamicSrc(item.imgActiveSrc, baseUrl)" alt="">
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, watch } from 'vue';
import tabbar from '@/assets/data/tabbar';
import { getDynamicSrc } from '@/utils/getDynamicSrc';
const baseUrl = import.meta.url
const router = useRouter()
const route = useRoute()
watch(route, (newRoute) => {
  const currentIndex = tabbar.findIndex(item => item.path === newRoute.fullPath)
  if (currentIndex === -1) return
  currentActive.value = currentIndex

})
const currentActive = ref()





</script>

<style lang="less" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;

  .tab-bar-item {
    flex: 1;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;


    img {
      height: 28px;
    }

    .text {
      margin-top: 2px;
    }
  }
}
</style>
